<template>
  <div class="background">
    <div class="title">
      <Icon type="ios-musical-notes-outline" />
      我的音乐
    </div>
    <div class="my-music">
      <Row>
        <Col span="3">
          <div @click="select(1)">
            <side-bar-tab :selected="1 === this.selected">上传音乐</side-bar-tab>
          </div>
          <div @click="select(2)">
            <side-bar-tab :selected="2 === this.selected">上传的音乐</side-bar-tab>
          </div>
          <div @click="select(3)">
            <side-bar-tab :selected="3 === this.selected">购买的音乐</side-bar-tab>
          </div>
        </Col>

        <Col span="1">
          <div style="width: 1px;height: 542px;background-color: rgba(235, 122, 103, 100); margin-left: 10px"></div>
        </Col>

        <Col span="20" v-show="selected === 1">
          <Form
            ref="uploadMusic"
            :model="uploadMusic"
            :label-width="100"
            label-position="right"
            :rules="uploadMusicRule">
            <FormItem label="版权方：">
              <p>当前账号</p>
            </FormItem>
            <Row>
              <Col span="12">
                <FormItem label="作品名称：" :required="true" prop="musicName">
                  <label>
                    <Input v-model="uploadMusic.musicName"></Input>
                  </label>
                </FormItem>
              </Col>
              <Col span="12">
                <FormItem label="专辑名称：">
                  <label>
                    <Input v-model="uploadMusic.albumName"></Input>
                  </label>
                </FormItem>
              </Col>
            </Row>
            <Row>
              <Col span="12">
                <FormItem label="唱片公司：">
                  <label>
                    <Input v-model="uploadMusic.recordCompany"></Input>
                  </label>
                </FormItem>
              </Col>
              <Col span="12">
                <FormItem label="出版公司：">
                  <label>
                    <Input v-model="uploadMusic.publishingCompany"></Input>
                  </label>
                </FormItem>
              </Col>
            </Row>
            <FormItem label="作品类别：" :required="true">
              <RadioGroup v-model="uploadMusic.musicType">
                <Radio :label="0">曲谱</Radio>
                <Radio :label="1">歌曲</Radio>
              </RadioGroup>
            </FormItem>
            <Row v-show="uploadMusic.musicType === 1">
              <Col span="12">
                <FormItem label="词作者：" :required="true">
                  <label>
                    <Input v-model="uploadMusic.lyricist" placeholder="请输入词作者姓名"></Input>
                  </label>
                </FormItem>
              </Col>
              <Col span="12">
                <div style="margin-left: 100px; display: flex">
                  <Upload
                    :before-upload="beforeUpload1"
                    :action="baseURL + '/music/uploadFile'"
                    :format="['txt',]"
                    :on-format-error="handleFormatError"
                    :on-success="success1"
                    :on-error="error1"
                    :headers="{ 'Authorization': this.$store.state.accessToken }">
                    <Button icon="ios-cloud-upload-outline" v-if="lyricsFile === null">上传歌词文件</Button>
                    <Button icon="ios-cloud-upload-outline" v-else>{{ lyricsFile.name }}</Button>
                  </Upload>
                  <div v-if="!lyricsFile" style="height: 40px; line-height: 40px; margin-left: 25px">支持扩展名：.txt</div>
                  <div v-else>
                  </div>
                </div>
              </Col>
            </Row>
            <Row>
              <Col span="12">
                <FormItem label="曲作者：" :required="true" prop="composer">
                  <label>
                    <Input v-model="uploadMusic.composer" placeholder="请输入曲作者姓名"></Input>
                  </label>
                </FormItem>
              </Col>
              <Col span="12">
                <div style="margin-left: 100px; display: flex">
                  <Upload
                    :before-upload="beforeUpload2"
                    :action="baseURL + '/music/uploadFile'"
                    :headers="{ 'Authorization': this.$store.state.accessToken }"
                    :on-success="success2"
                    :on-error="error2">
                    <Button icon="ios-cloud-upload-outline" v-if="opernFile === null">上传曲谱文件</Button>
                    <Button icon="ios-cloud-upload-outline" v-else>{{ opernFile.name }}</Button>
                  </Upload>
                  <div v-if="!opernFile" style="height: 40px; line-height: 40px; margin-left: 25px">支持扩展名：.？</div>
                  <div v-else>
                  </div>
                </div>
              </Col>
            </Row>
            <Row v-show="uploadMusic.musicType === 1">
              <Col span="12">
                <FormItem label="演唱者：" :required="true">
                  <label>
                    <Input v-model="uploadMusic.singer" placeholder="请输入演唱者姓名"></Input>
                  </label>
                </FormItem>
              </Col>
              <Col span="12">
                <div style="margin-left: 100px; display: flex">
                  <Upload
                    :before-upload="beforeUpload3"
                    :action="baseURL + '/music/uploadFile'"
                    :headers="{ 'Authorization': this.$store.state.accessToken }"
                    :on-success="success3"
                    :on-error="error3">
                    <Button icon="ios-cloud-upload-outline" v-if="musicFile === null">上传歌曲文件</Button>
                    <Button icon="ios-cloud-upload-outline" v-else>{{ musicFile.name }}</Button>
                  </Upload>
                  <div v-if="!musicFile" style="height: 40px; line-height: 40px; margin-left: 25px">支持扩展名：.？</div>
                  <div v-else>

                  </div>
                </div>
              </Col>
            </Row>
            <FormItem>
              <Button type="primary" @click="submit('uploadMusic')">确认上传</Button>
              <Button style="margin-left: 8px">取消上传</Button>
            </FormItem>
          </Form>
        </Col>

        <!--        上传的音乐-->
        <Col span="20" v-show="selected === 2">
          <Row>
            <Col span="10" style="float: right; margin-right: 100px">
              <label>
                <Input search enter-button placeholder="请输入作品名称..." />
              </label>
            </Col>
          </Row>
          <uploaded-music></uploaded-music>
        </Col>

        <Col span="20" v-show="selected === 3">
          <Row>
            <Col span="10" style="float: right; margin-right: 100px">
              <label>
                <Input search enter-button placeholder="请输入作品名称..." />
              </label>
            </Col>
          </Row>
          <bought-music></bought-music>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
import SideBarTab from '@/components/SideBarTab'
import { baseURL } from '@/common/const'
import UploadedMusic from '@/components/UploadedMusic'
import BoughtMusic from '@/components/BoughtMusic'

export default {
  name: 'MyMusic',
  components: {
    SideBarTab,
    UploadedMusic,
    BoughtMusic
  },
  data () {
    // 模拟验证常规数据
    const validateNotEmpty = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('不能为空'))
      }
    }
    return {
      uploadMusicRule: {
        musicName: [
          {
            validate: validateNotEmpty,
            trigger: 'blur',
            required: true,
            message: 'tst'
          }
        ],
        composer: [
          {
            validate: validateNotEmpty,
            trigger: 'blur'
          }
        ]
      },
      baseURL,
      selected: 1,
      uploadMusic: {
        musicName: '',
        albumName: '',
        recordCompany: '',
        publishingCompany: '',
        musicType: 1,
        lyricist: '',
        composer: '',
        singer: '',
        musicAddress: '',
        lyricsFile: '',
        opernFile: ''
      },
      lyricsFile: null,
      opernFile: null,
      musicFile: null
    }
  },
  methods: {
    select (num) {
      this.selected = num
    },
    handleFormatError () {
      this.$Message.warning('请检查文件格式')
    },
    beforeUpload1 (file) {
      this.lyricsFile = file
      return true
    },
    beforeUpload2 (file) {
      this.opernFile = file
      return true
    },
    beforeUpload3 (file) {
      this.musicFile = file
      return true
    },
    success1 (res) {
      if (res.code === 20000) {
        this.$Notice.success({
          title: '成功上传文件',
          desc: this.lyricsFile.name
        })
        this.uploadMusic.lyricsFile = res.data
      } else {
        this.$Notice.error({
          title: '文件上传失败',
          desc: res.message
        })
      }
    },
    success2 (res) {
      if (res.code === 20000) {
        this.$Notice.success({
          title: '成功上传文件',
          desc: this.opernFile.name
        })
        this.uploadMusic.opernFile = res.data
      } else {
        this.$Notice.error({
          title: '文件上传失败',
          desc: res.message
        })
      }
    },
    success3 (res) {
      if (res.code === 20000) {
        this.$Notice.success({
          title: '成功上传文件',
          desc: this.musicFile.name
        })
        this.uploadMusic.musicAddress = res.data
      } else {
        this.$Notice.error({
          title: '文件上传失败',
          desc: res.message
        })
      }
    },
    error1 (res) {
      console.log(res)
    },
    error2 (res) {

    },
    error3 (res) {

    },
    submit (name) {
      this.$refs[name].validate((valid) => {
        console.log(valid)
        if (valid) {
          this.$post('/music/uploadMusic', this.uploadMusic).then(res => {
            console.log(res)
            if (res.code === 20000) {
              this.$Notice.success({
                title: '音乐上传成功'
              })
            } else {
              this.$Notice.error({
                title: '音乐上传失败',
                desc: res.message
              })
            }
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.my-music {
  width: 90%;
  margin: 90px auto 0;
  z-index: -1;
}
</style>

